<template>
 <div class="box">
  <div class="top" style="background:#fff;z-index:999;">
    <van-nav-bar @click-left="fn" title="当前城市-" left-text="返回"/>
    <van-search placeholder="请输入城市名称或拼音" show-action v-model="value"/>
  </div>
  <div class="content" v-show="!value" @scroll="onScroll">
    <div class="left">
      <div class="recommend-city">
        <div class="gprs-city">
          <p>GPS定位你所在城市</p>
          <ul>
            <li>定位失败</li>
          </ul>
        </div>
        <div class="hot-city">
          <p>热门城市</p>
          <ul>
            <li v-for="(item, index) in hotList" :key="index"
            @click="select_city(item.name)">
              {{item.name}}
            </li>
          </ul>
        </div>

      </div>
      <div class="city_list">
        <ul v-for="item in this.CityList" :key="item.py">
          <p class="py" :ref="`list_${item.py}`">{{item.py}}</p>
          <li v-for="city in item.list" :key="city.cityId"
          @click="select_city(city.name)">
            {{city.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <ul>
        <p></p>
        <li v-for="py in this.pys" :key="py" @click="fn1(py)">
          {{py}}
        </li>
      </ul>
    </div>
  </div>
  <div class="search">
    <ul v-show="value">
      <li v-for="item in searchCity" :key="item.cityId"
      @click="select_city(item.name)">
        {{item.name}}
      </li>
    </ul>
  </div>
 </div>
</template>

<script>
import { getCityList } from '../api/City'
export default {
  name: 'City',
  data () {
    return {
      cities: [],
      value: ''
    }
  },
  created () {
    getCityList(6045884).then((res) => {
      this.cities = res.data.data.cities
    })
  },
  computed: {
    // 对原始数据进行相应的处理
    CityList () {
      let result = [] // 定义一个空数组储存处理过的数据
      this.cities.forEach(item => {
        // 得到每个城市的大小首字母
        let py = item.pinyin.charAt(0).toUpperCase()
        // 判断得到的py是否存在于result中，如果存在，那就将该数据item直接单独添加到已有的py类上，否则push新类
        let index = result.findIndex(city => city.py === py)
        if (index > -1) {
          // 存在
          result[index].list.push(item)
        } else {
          // 不存在
          let obj = {
            py,
            list: [item]
          }
          result.push(obj)
        }
      })
      return result
    },
    pys () {
      return this.CityList.map(item => item.py)
    },
    hotList () {
      return this.cities.filter(item => item.isHot)
    },
    // 搜索查询
    searchCity () {
      return this.cities.filter(item => {
        return item.name.indexOf(this.value) > -1 || item.pinyin.indexOf(this.value) > -1
      })
    }
  },
  methods: {
    fn () {
      this.$router.go(-1)
    },
    fn1 (py) {
      let top = this.$refs[`list_${py}`][0].offsetTop
      console.log(top, this.$refs[`list_${py}`])
      // document.getElementsByClassName('content').addEventListener('scroll', () => {
      //   console.log(111)
      //   document.body.scrollTop = top
      // })
      // console.log(document.getElementsByClassName('content'))
      // document.getElementsByClassName('content').scrollTop = top
    },
    select_city (CityName) {
      localStorage.setItem('cityName', CityName)
      this.$router.back()
    },
    onScroll (evevt) {
      console.log(evevt, evevt.target.scrollTop)
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  height:100%;
}
.top{
  position: fixed;
  top:0;
  left:0;
  width:100%;
}
.content{
  display: flex;
  padding-top:90px;
  overflow-y: auto;
  height:100%;
  .left{
    flex: 1;
    .recommend-city{
      background-color: #fff;
      padding-left: 15px;
      padding-top: 15px;
      height:210px;
      p{
        font-size: 13px;
        color: #797d82;
        margin-bottom: 10px;
        height:20px;
      }
      ul{
        height:70px;
        display: flex;
        justify-content: flex-start;
        align-content: center;
        margin:10px 0;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        li{
          height: 30px;
          width:110px;
          text-align: center;
          background-color: #f4f4f4;
          line-height: 30px;
          border-radius: 3px;
          box-sizing: border-box;
          margin: 0 7.5px;
          font-size: 14px;
          color: #191a1b;
        }
      }
    }
    .city_list{
      padding-left: 15px;
      margin-top:10px;
      overflow-y: auto;
      ul{
        display: flex;
        justify-content: flex-start;
        align-content: center;
        flex-wrap: wrap;
        p{
          width:100%;
          background-color: #f4f4f4;
          color: #797d82;
          height: 30px;
          line-height: 30px;
        }
        &::after{
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          height: 1px;
          border-bottom: 1px solid #ededed;
          color: #ededed;
          transform-origin: 0 100%;
          transform: scaleY(.5);
        }
        li{
          position: relative;
          box-sizing: border-box;
          height: 48px;
          line-height: 48px;
          width: 100%;
        }
      }
    }
  }
  .right{
    ul{
      width:18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      top:25%;
      right: 0;
      li{
        font-size: 13px;
        padding: 0 6px;
        color: #191a1b;
        height:20px;
        line-height: 20px;
      }
    }
  }
}
.search{
  li{
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    width: 100%;
  }
}
</style>
